<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { zddjList } from "@/data/dqfx";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";
import { postJbfaTable } from "@/api/table";

const city = window.globalObj.name;
const editorRef = shallowRef();
const editorRef1 = shallowRef();
const valueHtml = ref(
  `<p>当前，随着中美战略博弈进入战略相持阶段，俄乌冲突负面效应持续外溢，美（盟）借朝核问题强化对我遏压的战略企图更加明显、策略指向更加清晰，受和平去核无望、维系全球霸权、国内政治斗争等因素影响，可能蓄意制造动乱、挑起战争。${city}是国家二类重点防空城市，重要能源战略城市，是城市防空作战的主要对象，战时一旦遭敌空袭破坏，不仅关系到黑龙江省和东北战区的稳定，对国家的政治、经济和军事态势也必将产生重大影响。</p>`
);
const valueHtml1 = ref(
  "<p>从近期几场局部战争和美发动的军事打击实践看，美空袭主要是以火力打击与信息攻击相结合、空中打击与地面袭击相结合、防区外打击与抵近攻击相结合的方式实施打击。对我人民防空构成直接威胁的主要行动样式有：（1）海空作战平台导弹突击（2）隐身飞机抵近攻击（3）无人机群“蜂群”冲击（4）太空武器贯顶打击（5）信息战力量网电攻击（6）敌特分子恐怖袭击侦察监视，电磁干扰和压制，心理攻击，精确火力打击，常规火力突击。</p>"
);
const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };
const editorConfig1 = { placeholder: "请输入内容..." };
const toolbarConfig1 = {};
const mode = ref("default");
const mode1 = ref("default");
const zddjqy = ref("XX区、XX区、XX区");
const tableData = ref(zddjList);
const multipleSelection = ref([]);
const editorRef10 = shallowRef();
const valueHtml10 = ref("内容");
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const editorRef11 = shallowRef();
const valueHtml11 = ref("内容");
const toolbarConfig11 = {};
const editorConfig11 = { placeholder: "请输入内容..." };
const mode11 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};
const handleCreated11 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};

// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "情况判断结论-敌情分析判断" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "敌空袭企图")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "打击方式")?.v || "";
    valueHtml10.value = data.find((x) => x.k === "人民防空重点地域")?.v || "";
    valueHtml11.value =
      data.find((x) => x.k === "敌可能重点打击的目标")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};

// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "情况判断结论-敌情分析判断",
      data: [
        {
          k: "敌空袭企图",
          v: valueHtml.value,
        },
        {
          k: "打击方式",
          v: valueHtml1.value,
        },
        {
          k: "人民防空重点地域",
          v: valueHtml10.value,
        },
        {
          k: "敌可能重点打击的目标",
          v: valueHtml11.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

// 合并单元格
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 1) {
    // 与前一个值对比，相等为合并行，不相等为当前类型第一行
    if (row.district !== tableData.value[rowIndex - 1]?.district) {
      let rowspan = 0;
      tableData.value.forEach((x) => {
        if (row.district === x.district) rowspan++;
      });
      return [rowspan, 1];
    } else {
      return [0, 0];
    }
  }
};
// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};
// 表格选中
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

// 敌可能重点打击的目标清单
const djList = ref([]);
const getDjData = () => {
  return postJbfaTable("dknzddjdmbqdList").then((res) => {
    if (res.code === 200) {
      djList.value = res?.data || [];
    }
  });
};

onMounted(() => {
  initHtml();
  getDjData();
});

onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  if (!editor) return;
  if (!editor1) return;
  editor.destroy();
  editor1.destroy();
  if (editorRef10.value) editorRef10.value.destroy();
  if (editorRef11.value) editorRef11.value.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="敌空袭企图" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="人民防空重点地域" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>

    <FirstTitle name="打击方式" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig1"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="敌可能重点打击的目标" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef11"
        :defaultConfig="toolbarConfig11"
        :mode="mode11"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml11"
        :defaultConfig="editorConfig11"
        :mode="mode11"
        @onCreated="handleCreated11"
      />
    </div>
    <FirstTitle name="重点打击目标" class="top-15" />
    <div class="top-15 zddj text-center">
      {{ city }}敌可能重点打击的目标清单
    </div>
    <el-table
      id="table"
      :data="djList"
      class="top-15"
      style="width: 100%"
      :span-method="arraySpanMethod"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="data0" label="序号" width="60" align="center" />
      <el-table-column prop="data1" label="行政区划（域）" />
      <el-table-column prop="data2" label="目标名称" />
      <el-table-column prop="data3" label="地址" />
      <el-table-column prop="data4" label="目标等级" />
      <el-table-column prop="data5" label="目标性质" />
    </el-table>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
.zddj {
  font-size: 14px;
}
</style>
